<template>
  <div>
    <div class="bannerTop">
      <img
        src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/new-xiaoxi.png"
        mode="widthFix"
        class="newWordImg"
        @click="handleLinkNew"
      />
      <img class="bannerImg" :src="themeImg" mode="widthFix" />
      <div class="content">
        <img
          class="iconImg"
          src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/info_tips_yellow.png"
          mode="widthFix"
          @click="yellowHintClick"
        />
        <img
          class="iconImg"
          src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/info_tips_yellow.png"
          mode="widthFix"
          @click="yellowHintClick"
        />
        <div class="circleProgress_wrapper" @click="dataInfoLinkClick">
          <div class="wrapper top">
            <div class="circleProgress rightcircle">
              <span class="circle_span"></span>
            </div>
          </div>
          <div class="wrapper bottom">
            <div class="circleProgress leftcircle">
              <span class="circle_span"></span>
            </div>
          </div>
        </div>

        <div class="circle">
          <div class="top">
            <p>订单数</p>
            <span>{{countForm.orderTotal}}</span>
          </div>
          <div class="middle">￥{{saleAmountSum}}</div>
          <div class="bottom">
            <div>
              <p>收藏数</p>
              <span>{{countForm.collect}}</span>
            </div>
            <div>
              <p>会员数</p>
              <span>{{countForm.memberTotal}}</span>
            </div>
          </div>
        </div>
        <p class="hint">点击数据可查看更多详情</p>
      </div>
    </div>
    <div class="navButton">
      <p
        v-for="(item,index) in navList"
        :key="index"
        @click="navLinkClick(item)"
      >
        <img class="iconImg" :src="item.src" mode="widthFix" />
        <span>{{item.label}}</span>
      </p>
    </div>
    <div class="zz" v-if="isHint"></div>
    <div class="hintBox" v-if="isHint">
      <img
        src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bulb.png"
        mode="widthFix"
      />
      <span>温馨提示</span>
      <p>成交金额为店铺自创建到目前的已成交总交易金额。</p>
      <button class="gradient-btn-blue" @click="colseHintClick">我知道了</button>
    </div>
    <vue-tab-bar
      @fetch-index="clickIndexNav"
      :selectNavIndex="selectNavIndex"
      :needButton="needButton"
    ></vue-tab-bar>
  </div>
</template>

<script>
// import { formatNumber2 } from '@/utils'
import { dateFormatter } from '@/utils'
import vueTabBar from '../../../components/vueTabBar'

import {
  SHOP_COLLECTION_COUNT,
  FIND_SHOP_ORDER_PAGE,
  FIND_CUSTOMER_PAGE_API,
  SHOP_SALES_COUNT,
  FIND_BY_SHOPID_PAGEAPI,
  FIND_SHOP_BASE_INFO
} from '@/api'

export default {
  components: { vueTabBar },
  props: {},
  data () {
    return {
      saleAmountSum: '',
      countForm: {
        amount: 0,
        collect: 0,
        orderTotal: 0,
        memberTotal: 0
      },
      list1: [
        { name: '订单数', key: 'orderTotal' },
        { name: '收藏数', key: 'collect' },
        { name: '会员数', key: 'memberTotal' }
      ],
      list2: [
        {
          // img: '/static/assets/img/sy_qfx.png',
          link: '/pages/home/share/main',
          show: true
        },
        {
          // img: '/static/assets/img/sy_yhq.png',
          link: '/pages/shop-management/coupon-list/main',
          show: true
        },
        {
          // img: '/static/assets/img/sy_pt.png',
          link: '/pages/home/group/index/main',
          show: false
        }
        // { img: '/static/assets/img/sy_pt.png', link: '/pages/home/community/main' }, // 社区
      ],
      shopIdentity: '',
      navList: [
        {
          label: '收款二维码',
          src:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/home_skewm.png',
          link: '/pages/mine/shop-config/qr-code/main',
          key: 'skcode'
        },
        {
          label: '店铺二维码',
          src:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/home_dpewm.png',
          link: '/pages/mine/shop-config/qr-code-shop/main'
        },
        {
          label: '核销管理',
          src:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/store_management_hxgl.png',
          link: '/pages/shop-management/my-verification/main'
        }
      ],
      isHint: false,
      selectNavIndex: 0,
      needButton: true
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    count () {
      let obj = { ...this.countForm }
      obj.amount = this.account.totalIncome
      return obj
    },
    themeImg () {
      let appId = this.$store.state.appId
      if (appId !== 'wx657f1b2fb50b5be3') {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_home.png'
      } else {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_home2.png'
      }
    }
  },
  onShareAppMessage () {
    return {
      title: '开店宝',
      // path: '/pages/login/index/main',
      path: '/pages/login/login/main',
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.getShopIdentityParams()
    this.initPage()
    wx.hideTabBar()
  },
  methods: {
    test () {
      wx.navigateToMiniProgram({
        appId: 'wxc5eef9244e1d68a8',
        path: 'pages/apply/main?id=123',
        extraData: {
          foo: 'bar'
        },
        // develop（开发版），trial（体验版），release（正式版）
        envVersion: 'trial',
        success (res) {
          // 打开成功
          console.log(res)
        }
      })
    },
    yellowHintClick () {
      this.isHint = true
    },
    colseHintClick () {
      this.isHint = false
    },
    dataInfoLinkClick () {
      // this.$router.push('/pages/home/data-analyze/main')
      this.$router.push('../../dataAnalyze/pages/data-analyze/main')
    },
    handleLinkNew () {
      this.$router.push('/pages/mine/inform/index/main')
    },
    navLinkClick (item) {
      const vm = this
      if (item.key === 'skcode') {
        if (vm.shopIdentity === 'PERSONAL') {
          vm.$toast('创业宝不能使用此功能，请先升级宝主身份。')
        } else {
          vm.$router.push(`${item.link}`)
        }
      } else {
        vm.$router.push(`${item.link}`)
      }
    },
    initPage () {
      this.shopSaleAmountCount()
      // this.shopMemberCount()
      this.shopCollectionCount()
      this.shopOrderCount()
      this._getVIPNumPeople()
      this._getShopMoney()
      this._findTool()
    },

    shopSaleAmountCount () {
      this.countForm.amount = Math.floor(Math.random() * 10000)
    },
    shopMemberCount () {
      // this.countForm.memberTotal = Math.floor(Math.random() * 100) + '(fake)'
      this.countForm.memberTotal = 0
    },
    shopCollectionCount () {
      const vm = this

      SHOP_COLLECTION_COUNT(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.countForm.collect = r.data.data
          } else if (r.data.code === '000040') {
            wx.showModal({
              content: '登录失效，请重新登录',
              showCancel: false,
              confirmText: '确定',
              confirmColor: '#5d93fd',
              success: function (res) {
                if (res.confirm) {
                  let loginState = vm.$cookie.get('loginState')
                  let isOneClickDis = vm.$cookie.get('isOneClickDis')
                  vm.$cookie.clear()
                  vm.$cookie.set('loginState', loginState)
                  vm.$cookie.set('isOneClickDis', isOneClickDis)
                  vm.$router.new('/pages/login/login/main')
                }
              },
              fail: function (err) {
                console.error(err)
              }
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    shopOrderCount () {
      const vm = this

      let params = {
        shopId: vm.account.shopId,
        state: '3,7'
      }

      FIND_SHOP_ORDER_PAGE(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            vm.countForm.orderTotal = r.data.data.total
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    _getVIPNumPeople () {
      const vm = this
      let params = {
        shopId: vm.account.shopId
      }
      FIND_CUSTOMER_PAGE_API(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            vm.countForm.memberTotal = r.data.data.total
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    _getShopMoney () {
      const vm = this

      let params = {
        shopId: vm.account.shopId,
        orderDateStart: '1970-01-01 00:00:00',
        orderDateEnd: dateFormatter('yyyy-MM-dd 23:59:59', new Date()),
        // state: '3'
        state: '0'
      }
      SHOP_SALES_COUNT(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            let val = arr.reduce((acc, _) => {
              if (_.state === '3' || _.state === '7') {
                acc += _.saleAmount
              }
              return acc
            }, 0)
            vm.saleAmountSum = val.toFixed(2)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    _findTool () {
      const vm = this
      vm.list2[2].show = false
      if (!vm.$cookie.get('isGroup')) {
        FIND_BY_SHOPID_PAGEAPI(vm.account.shopId, 1, 99)
          .then(r => {
            if (r.data.code === '0') {
              let list = r.data.data.list
              for (let i = 0; i < list.length; i++) {
                if (list[i].marketingType === 'GROUP') {
                  this.list2[2].show = true
                  vm.$cookie.set('isGroup', true)
                  return
                }
              }
            } else {
              vm.$toast(r.data.message)
            }
          })
          .catch(e => {
            console.info(e)
          })
      } else {
        this.list2[2].show = true
      }
    },
    getShopIdentityParams () {
      const vm = this
      FIND_SHOP_BASE_INFO(vm.account.shopId).then(r => {
        if (r.data.code === '0') {
          vm.shopIdentity = r.data.data.shopIdentity
        } else {
          vm.$toast(r.data.message)
        }
      })
    },
    linkClick (item) {
      const vm = this
      if (vm.shopIdentity === 'PERSONAL') {
        vm.$toast('创业宝不能使用此功能，请先升级商家身份。')
      } else {
        vm.$router.push(`${item.link}`)
      }
    } // 创业宝不能使用营销工具
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.bannerTop {
  width: 100%;
  height: 430px;
  position: relative;
  .newWordImg {
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
  }
  .bannerImg {
    width: 100%;
    height: 430px;
    position: absolute;
    top: 0;
    z-index: -1;
  }
  .content {
    width: 100%;
    height: 430px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .iconImg {
      width: 15px;
      height: 15px;
      position: absolute;
      top: 20px;
      right: 80px;
    }
    .circleProgress_wrapper {
      width: 290px;
      height: 290px;
      position: absolute;
      top: 35px;
      z-index: 1;
      .wrapper {
        width: 290px;
        height: 130px;
        position: absolute;
        left: 0;
        overflow: hidden;
      }
      .top {
        top: 0;
      }
      .bottom {
        bottom: 0;
        transform: rotate(180deg);
      }
      .circleProgress {
        width: 290px;
        height: 290px;
        border: 3px solid #e19c7b;
        border-radius: 50%;
        position: absolute;
        top: 0;
        transform: rotate(45deg);
      }
      .rightcircle {
        border-top: 3px solid #fff;
        border-right: 3px solid #fff;
        right: 0;
        animation: circleProgressLoad_right 15s linear infinite;
      }
      .leftcircle {
        border-bottom: 3px solid #fff;
        border-left: 3px solid #fff;
        left: 0;
        animation: circleProgressLoad_left 15s linear infinite;
      }
      .circle_span {
        background-color: #fff;
        border: 1px solid #e19c7b;
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        left: 38px;
        top: 34px;
      }
      @keyframes circleProgressLoad_right {
        0% {
          -webkit-transform: rotate(-38deg);
        }
        50% {
          -webkit-transform: rotate(126deg);
        }
        100% {
          -webkit-transform: rotate(-38deg);
        }
      }
      @keyframes circleProgressLoad_left {
        0% {
          -webkit-transform: rotate(-38deg);
        }
        50% {
          -webkit-transform: rotate(126deg);
        }
        100% {
          -webkit-transform: rotate(-38deg);
        }
      }
    }
    .circle {
      width: 240px;
      height: 240px;
      border: 1px solid #fff;
      border-radius: 50%;
      margin-bottom: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      .top {
        width: 100%;
        p {
          font-size: 14px;
          text-align: center;
        }
        span {
          display: block;
          font-size: 13px;
          text-align: center;
        }
      }
      .middle {
        font-size: 24px;
        text-align: center;
        line-height: 70px;
      }
      .bottom {
        display: flex;
        div {
          margin: 0 25px;
          p {
            font-size: 14px;
            text-align: center;
          }
          span {
            display: block;
            font-size: 13px;
            text-align: center;
          }
        }
      }
    }

    .hint {
      font-size: 13px;
      color: #fff;
      position: absolute;
      bottom: 55px;
    }
  }
}
.navButton {
  display: flex;
  p {
    width: 33.33%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
    }
    span {
      font-size: 14px;
      color: #000;
    }
  }
}

.zz {
  position: fixed;
  z-index: 66;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.hintBox {
  position: absolute;
  z-index: 999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background: #fff;
  font-size: 14px;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-radius: 6px;
  img {
    width: 30px;
    height: 60px;
  }
  span {
    font-size: 15px;
  }
  p {
    width: 90%;
    font-size: 13px;
    text-align: center;
  }
  button {
    width: 100px;
    height: 30px;
  }
}

.banner {
  padding: 15px 0;
  box-shadow: 0 3px 5px $light-black;
  > .amount-block {
    text-align: center;
    margin: 30px 0 15px;
    > .small-title {
      font-size: 12px;
    }
    > .big-amount {
      font-size: 30px;
    }
  }
  > .quick-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > .count-block {
      width: 33%;
      text-align: center;
      &:not(:last-child) {
        border-right: 1px solid $light-white;
      }
      > .title {
        font-size: 12px;
      }
      > .value {
        font-size: 16px;
      }
    }
  }
}
.quick-wrap {
  padding: 15px;
  > .link {
    width: 100%;
    > .fake {
      width: 100%;
    }
  }
}
.isOneClickDis {
  .zz {
    position: fixed;
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  .box {
    width: 270px;
    height: 370px;
    border-radius: 6px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    > .imgBox {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 5;
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .checkbox {
        width: 80%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, 0);
      }
      .cont {
        width: 80%;
        position: absolute;
        left: 50%;
        top: 60%;
        transform: translate(-50%, 0);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        font-size: 13px;
        color: #626efd;
      }
      .btn {
        width: 80%;
        position: absolute;
        left: 50%;
        top: 75%;
        transform: translate(-50%, 0);
        border-radius: 25px;
        background: #626efd;
        color: #fff;
        font-size: 15px;
      }
    }
  }
}
</style>
